<template>
	<div class="cart-container">
		<!-- 顶部导航栏 -->
		<div class="nav-header">
			<div class="nav-title">购物车</div>
			<div v-if="cartItems.length" class="clear-btn" @click="showClearConfirm">
				清空
			</div>
		</div>

		<!-- 购物车为空 -->
		<div v-if="!cartItems.length" class="empty-cart">
			<div class="empty-icon">
				<svg viewBox="0 0 1024 1024" width="160" height="160">
					<path d="M832 312H696v-16c0-101.6-82.4-184-184-184s-184 82.4-184 184v16H192c-17.7 0-32 14.3-32 32v536c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V344c0-17.7-14.3-32-32-32zM392 296c0-66.2 53.8-120 120-120s120 53.8 120 120v16H392v-16zm440 552H192V344h128v88c0 4.4 3.6 8 8 8h64c4.4 0 8-3.6 8-8v-88h224v88c0 4.4 3.6 8 8 8h64c4.4 0 8-3.6 8-8v-88h128v504z" 
						fill="#BFBFBF"/>
					<path d="M512 448c-35.3 0-64 28.7-64 64v192c0 35.3 28.7 64 64 64s64-28.7 64-64V512c0-35.3-28.7-64-64-64zm0 256c-17.7 0-32-14.3-32-32V512c0-17.7 14.3-32 32-32s32 14.3 32 32v160c0 17.7-14.3 32-32 32z" 
						fill="#BFBFBF"/>
				</svg>
			</div>
			<div class="empty-text">购物车是空的</div>
			<el-button type="primary" class="go-shopping" @click="goShopping">
				去选购车票
			</el-button>
		</div>

		<!-- 购物车列表 -->
		<div v-else class="cart-content">
			<!-- 车票列表 -->
			<div class="ticket-list">
				<div v-for="item in cartItems" :key="item.cartId" class="ticket-item">
					<div class="ticket-header">
						<div class="train-info">
							<span class="train-number">{{ item.trainNumber }}</span>
							<el-tag 
								size="small" 
								:type="getTrainTagType(item.trainNumber)"
							>
								{{ getTrainType(item.trainNumber) }}
							</el-tag>
						</div>
						<div class="remove-btn" @click="removeFromCart(item)">
							<el-icon><Delete /></el-icon>
						</div>
					</div>

					<div class="journey-info">
						<div class="time-station">
							<div class="time">{{ item.departureTime }}</div>
							<div class="station">{{ item.departure }}</div>
						</div>
						<div class="duration">
							<div class="duration-line"></div>
							<div class="duration-text">{{ item.duration }}</div>
						</div>
						<div class="time-station">
							<div class="time">{{ item.arrivalTime }}</div>
							<div class="station">{{ item.arrival }}</div>
						</div>
					</div>

					<div class="ticket-footer">
						<div class="price">
							<span class="price-symbol">￥</span>
							<span class="price-value">{{ item.price }}</span>
						</div>
						<div class="seats-info" :class="{ 'low': item.seats < 100 }">
							余票: {{ item.seats }}张
						</div>
					</div>
				</div>
			</div>

			<!-- 底部结算栏 -->
			<div class="checkout-bar">
				<div class="total-info">
					<div class="total-label">总计</div>
					<div class="total-price">
						<span class="price-symbol">￥</span>
						<span class="price-value">{{ total }}</span>
					</div>
				</div>
				<el-button 
					type="primary" 
					class="checkout-btn"
					@click="checkout"
				>
					去结算({{ cartItems.length }}张)
				</el-button>
			</div>
		</div>

		<!-- 清空确认弹窗 -->
		<el-dialog
			v-model="clearDialogVisible"
			title="清空购物车"
			width="90%"
			custom-class="clear-dialog"
		>
			<div class="clear-confirm">
				确定要清空购物车吗？此操作不可恢复。
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="clearDialogVisible = false">取消</el-button>
					<el-button type="danger" @click="clearCart">确定清空</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import { ref, computed } from 'vue'
import { useCartStore } from '@/stores/cart'
import { Delete } from '@element-plus/icons-vue'

export default {
	components: {
		Delete
	},
	setup() {
		const cartStore = useCartStore()
		const clearDialogVisible = ref(false)

		const cartItems = computed(() => cartStore.items)
		const total = computed(() => cartStore.total)

		const removeFromCart = (item) => {
			cartStore.removeFromCart(item.cartId)
			uni.showToast({
				title: '已移除',
				icon: 'success'
			})
		}

		const showClearConfirm = () => {
			clearDialogVisible.value = true
		}

		const clearCart = () => {
			cartStore.clearCart()
			clearDialogVisible.value = false
			uni.showToast({
				title: '购物车已清空',
				icon: 'success'
			})
		}

		const checkout = () => {
			uni.showModal({
				title: '确认订单',
				content: `总金额：￥${total.value}`,
				success: (res) => {
					if (res.confirm) {
						cartStore.clearCart()
						uni.showToast({
							title: '订单提交成功！',
							icon: 'success'
						})
					}
				}
			})
		}

		const goShopping = () => {
			uni.navigateBack()
		}

		const getTrainType = (trainNumber) => {
			const type = trainNumber.charAt(0)
			switch(type) {
				case 'G': return '高铁'
				case 'D': return '动车'
				case 'K': return '快速'
				case 'Z': return '直达'
				default: return '普通'
			}
		}

		const getTrainTagType = (trainNumber) => {
			const type = trainNumber.charAt(0)
			switch(type) {
				case 'G': return 'success'
				case 'D': return 'primary'
				case 'K': return 'warning'
				case 'Z': return 'info'
				default: return ''
			}
		}

		return {
			cartItems,
			total,
			clearDialogVisible,
			removeFromCart,
			showClearConfirm,
			clearCart,
			checkout,
			goShopping,
			getTrainType,
			getTrainTagType
		}
	}
}
</script>

<style scoped>
.cart-container {
	min-height: 100vh;
	background: #f5f7fa;
	padding-bottom: 100px; /* 为底部结算栏留出空间 */
}

/* 顶部导航栏 */
.nav-header {
	background: #fff;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0 15px;
	border-bottom: 1px solid #f0f0f0;
}

.nav-title {
	font-size: 16px;
	font-weight: 500;
	color: #333;
}

.clear-btn {
	position: absolute;
	right: 15px;
	color: #999;
	font-size: 14px;
}

/* 空购物车 */
.empty-cart {
	padding: 80px 20px;
	text-align: center;
	background: #fff;
	margin: 15px;
	border-radius: 12px;
}

.empty-icon {
	width: 160px;
	height: 160px;
	margin: 0 auto 20px;
	opacity: 0.5;
}

.empty-text {
	color: #909399;
	font-size: 16px;
	margin-bottom: 30px;
}

.go-shopping {
	width: 180px;
	height: 44px;
	border-radius: 22px;
	font-size: 16px;
}

/* 车票列表 */
.ticket-list {
	padding: 15px;
}

.ticket-item {
	background: #fff;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 10px;
}

.ticket-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.train-info {
	display: flex;
	align-items: center;
	gap: 8px;
}

.train-number {
	font-size: 16px;
	font-weight: 500;
	color: #333;
}

.remove-btn {
	color: #999;
	padding: 5px;
}

/* 行程信息 */
.journey-info {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.time-station {
	flex: 1;
	text-align: center;
}

.time {
	font-size: 18px;
	font-weight: 500;
	color: #333;
	margin-bottom: 4px;
}

.station {
	font-size: 12px;
	color: #666;
}

.duration {
	padding: 0 15px;
	text-align: center;
}

.duration-line {
	height: 1px;
	background: #e0e0e0;
	position: relative;
	margin: 10px 0;
}

.duration-line::before,
.duration-line::after {
	content: '';
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #e0e0e0;
	top: -1.5px;
}

.duration-line::before {
	left: 0;
}

.duration-line::after {
	right: 0;
}

.duration-text {
	font-size: 12px;
	color: #999;
}

/* 车票底��� */
.ticket-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 15px;
	border-top: 1px solid #f0f0f0;
}

.price {
	display: flex;
	align-items: baseline;
}

.price-symbol {
	font-size: 14px;
	color: #ff4d4f;
}

.price-value {
	font-size: 20px;
	font-weight: 500;
	color: #ff4d4f;
}

.seats-info {
	font-size: 12px;
	color: #666;
}

.seats-info.low {
	color: #ff4d4f;
}

/* 底部结算栏 */
.checkout-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	padding: 10px 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.total-info {
	display: flex;
	align-items: baseline;
	gap: 5px;
}

.total-label {
	font-size: 14px;
	color: #666;
}

.total-price {
	display: flex;
	align-items: baseline;
}

.checkout-btn {
	width: 150px;
	height: 40px;
	border-radius: 20px;
}

/* 清空确认弹窗 */
:deep(.clear-dialog) {
	border-radius: 12px;
}

.clear-confirm {
	padding: 20px 0;
	text-align: center;
	color: #666;
}

.dialog-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}
</style> 